<template>
	<!-- 合自定义查看 -->
	<div class="ledgerView">
		<!-- 表单 -->
		<div class="formBox">
			<el-form :inline="true" :model="form" class="demo-form-inline">
				<el-form-item label="搜索">
					<el-input
						v-model="form.searchName"
						placeholder="根据项目名称或编号搜索"
						maxlength="32"
					/>
				</el-form-item>

				<el-form-item label="合同签订时间范围">
					<el-date-picker
						v-model="form.searchName"
						type="daterange"
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						size="default"
						value-format="YYYY-MM-DD"
					/>
				</el-form-item>

				<el-button
					class="el_classbtn"
					color="#FF7B50"
					style="color: #fff"
					type="primary"
					@click="onQuery"
					>搜索</el-button
				>
				<el-button class="el_classbtn" style="" color="#F0F0F0" @click="onReset"
					>重置</el-button
				>

				<el-divider direction="vertical" />

				<el-button class="el_classbtn el_classderive" style="" color="#F0F0F0">
					<svg-icon icon-class="project-detail-icon-derive" class="icon" />
					一键导出</el-button
				>
			</el-form>
		</div>

		<!-- 表格 -->
		<public-table
			class="m-t20"
			:index="true"
			:page="state.page"
			border
			:tableData="state.tableData"
			:tableOption.sync="state.tableOption"
		>
			<template #operation="scope">
				<!-- <span
            style="cursor: pointer;color: #fc7037"
            @click="toPath(scope.row)"
        >{{scope.row.operation}}</span> -->
				<el-button
					color="#FF7B50"
					@click="toPath(scope.row, '查看')"
					style="color: #fff"
					type="primary"
					>查看</el-button
				>
			</template>
		</public-table>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElForm, ElDatePicker, ElDivider } from "element-plus";
import PublicTable from "@/components/PublicTable.vue";

const form = reactive({
	searchName: "",
});

const state = reactive({
	page: {
		total: 0,
		current: 1,
		size: 50,
	},
	tableOption: [
		{ label: "任务来源", prop: "actionName" },
		{ label: "合同名称", prop: "actionName" },
		{ label: "项目业主", prop: "actionName" },
		{ label: "合同类型(招标项目类别) ", prop: "actionName" },
		{ label: "单位产生方式(招标方式)", prop: "actionName" },
		{ label: "合同编号", prop: "actionName" },
		{ label: "几方合同及合同单位名称", prop: "actionName" },
		{ label: "合同对方单位名称", prop: "actionName" },
		{ label: "合同(中标)金额(元)", prop: "actionName" },
		{ label: "合同金额说明", prop: "actionName" },
		{ label: "合同费用承担方", prop: "actionName" },
		{ label: "合同对方单位联系人及联系方式", prop: "actionName" },
		{ label: "合同签订时间", prop: "actionName" },
		{ label: "服务期限", prop: "actionName" },
		{ label: "质保期", prop: "actionName" },
		{ label: "留底份数", prop: "actionName" },
		{ label: "备注", prop: "actionName", width: 300 },
	],
	tableData: [{}],
});

const onReset = () => {};

const onQuery = () => {};
</script>
<style lang="scss" scoped>
.ledgerView {
	.formBox {
		position: relative;
		.el-button {
			margin-top: -15px;
		}
		:deep(.el-input__wrapper) {
			height: 40px !important;
		}
	}

	.el_classderive {
		border: 1px solid #fc7018;
		color: #fc7018;
		background-color: #fff;
	}

	.el-divider {
		vertical-align: sub;
		height: 30px;
		margin: 0 15px;
	}
}
</style>
